<template>
    <div>
        <!-- 阿里云视频播放器样式 -->
        <link
            rel="stylesheet"
            href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css"
        />
        <!-- 阿里云视频播放器脚本 -->
        <script
            charset="utf-8"
            type="text/javascript"
            src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"
        />
        <!-- 定义播放器dom -->
        <div>
            <div class="ddd">
                <div class="videoDiv">
                    <div id="J_prismPlayer" class="prism-player" />
                </div>

                <div class="videoListDiv test-1">
                    <section class="mt20">
                        <div class="lh-menu-wrap">
                            <menu id="lh-menu" class="lh-menu mt10 mr10">
                                <ul>
                                    <!-- 文件目录 -->
                                    <li
                                        class="lh-menu-stair"
                                        v-for="chapter in course.chapters"
                                        :key="chapter.id"
                                    >
                                        <a
                                            href="javascript: void(0)"
                                            :title="chapter.title"
                                            class="current-1"
                                        >
                                            <em class="lh-menu-i-1 icon18 mr10"></em>
                                            {{chapter.title}}
                                        </a>
                                        <ol class="lh-menu-ol" style="display: block;">
                                            <li
                                                class="lh-menu-second ml30"
                                                v-for="video in chapter.children"
                                                :key="video.id"
                                            >
                                                <a
                                                    href="#"
                                                    title
                                                    @click.prevent="getVideo(video.videoSourceId,video.isFree)"
                                                >
                                                    <span class="fr">
                                                        <i
                                                            v-if="video.isFree"
                                                            class="free-icon vam mr10"
                                                        >免费</i>
                                                        <i
                                                            v-else
                                                            class="free-icon vam mr10"
                                                            style="color:red"
                                                        >付费</i>
                                                    </span>
                                                    <em
                                                        class="lh-menu-i-2 icon16 mr5"
                                                        :class="{'videoSpan':vid===video.videoSourceId}"
                                                    >&nbsp;</em>
                                                    {{video.title}}
                                                </a>
                                            </li>
                                        </ol>
                                    </li>
                                </ul>
                            </menu>
                        </div>
                    </section>
                </div>
            </div>
            <div class="commentDiv">
                <div class="mt50 commentHtml">
                    <div>
                        <h6 class="c-c-content c-infor-title" id="i-art-comment">
                            <span class="commentTitle">课程评论</span>
                        </h6>
                        <section class="lh-bj-list pr mt20 replyhtml">
                            <ul>
                                <li class="unBr">
                                    <aside class="noter-pic">
                                        <img
                                            v-if="user.avatar"
                                            width="50"
                                            height="50"
                                            class="picImg"
                                            :src="user.avatar"
                                        />
                                        <img
                                            v-else
                                            width="50"
                                            height="50"
                                            class="picImg"
                                            src="~/assets/img/avatar-boy.gif"
                                        />
                                    </aside>
                                    <div class="of">
                                        <section class="n-reply-wrap">
                                            <fieldset>
                                                <textarea
                                                    name
                                                    v-model="comment.content"
                                                    placeholder="输入您要评论的文字"
                                                    id="commentContent"
                                                ></textarea>
                                            </fieldset>
                                            <p class="of mt5 tar pl10 pr10">
                                                <span class="fl">
                                                    <tt
                                                        class="c-red commentContentmeg"
                                                        style="display: none;"
                                                    ></tt>
                                                </span>
                                                <input
                                                    type="button"
                                                    value="回复"
                                                    class="lh-reply-btn"
                                                    @click="saveComment()"
                                                />
                                            </p>
                                        </section>
                                    </div>
                                </li>
                            </ul>
                        </section>
                        <section class>
                            <section class="question-list lh-bj-list pr">
                                <ul class="pr10">
                                    <li v-for="comm in comments" :key="comm.id">
                                        <aside class="noter-pic">
                                            <img
                                                width="50"
                                                height="50"
                                                class="picImg"
                                                :src="comm.avatar"
                                            />
                                        </aside>
                                        <div class="of">
                                            <span class="fl">
                                                <font class="fsize12 c-blue">{{comm.nickname}}</font>
                                                <font class="fsize12 c-999 ml5">评论：</font>
                                            </span>
                                        </div>
                                        <div class="noter-txt mt5">
                                            <p>{{comm.content}}</p>
                                        </div>
                                        <div class="of mt5">
                                            <span class="fr">
                                                <font class="fsize12 c-999 ml5">{{comm.gmtCreate}}</font>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </section>
                        </section>

                        <!-- 公共分页 开始 -->
                        <div>
                            <div class="paging">
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :total="total"
                                    :page-size="4"
                                    @current-change="handleCurrentChange"
                                ></el-pagination>
                            </div>
                        </div>
                        <!-- 公共分页 结束 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getVideoPlayAuth } from "@/api/course/video";
import { getCourseById } from "@/api/course/course";
import { saveComment, pageComment } from "@/api/course/comment";
import { isUserHasCourse } from "@/api/course/courseCollect";
import cookie from "js-cookie";
export default {
    layout: "video",
    asyncData({ params, error }) {
        return getVideoPlayAuth(params.vid).then((response) => {
            return {
                vid: params.vid,
                playAuth: response.data.playAuth,
            };
        });
    },
    data() {
        return {
            course: [],
            aliplayer: "",
            count: 0,
            comments: [],
            comment: {},
            user: {},
            current: 1,
            total: 0,
            isCanWatch: false,
        };
    },
    watch: {},
    methods: {
        getCourseById() {
            return new Promise((resolve) => {
                getCourseById(this.$route.query.courseId, true, false).then(
                    (response) => {
                        this.course = response.data.course;
                        resolve();
                    }
                );
            });
        },
        isUserHasCourse() {
            isUserHasCourse(this.course.id).then((response) => {
                this.isCanWatch = response.data.has;
            });
        },
        getUserInfo() {
            return new Promise((resolve) => {
                var jsonStr = cookie.get("edu_user");
                if (jsonStr) {
                    this.user = JSON.parse(jsonStr);
                }
                resolve();
            });
        },
        getVideoPlayAuth(videoSourceId, isFree = true) {
            return new Promise((resolve) => {
                //判断视频是否免费
                if (isFree || this.isCanWatch) {
                    getVideoPlayAuth(videoSourceId).then((response) => {
                        this.playAuth = response.data.playAuth;
                        this.vid = videoSourceId;
                        resolve();
                    });
                } else {
                    this.$confirm("该课程需要付费，请前往支付", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            window.location.href = "/course/" + this.course.id;
                        })
                        .catch(() => {});
                }
            });
        },
        getVideo(videoSourceId, isFree) {
            this.getVideoPlayAuth(videoSourceId, isFree).then(() => {
                this.aliplayer.replayByVidAndPlayAuth(this.vid, this.playAuth);
            });
        },
        getNextVideo() {
            for (let i = 0; i < this.course.chapters.length; i++) {
                for (
                    let j = 0;
                    j < this.course.chapters[i].children.length;
                    j++
                ) {
                    let v = this.course.chapters[i].children[j];
                    if (v.videoSourceId === this.vid) {
                        let isFree = false;
                        if (j < this.course.chapters[i].children.length - 1) {
                            this.vid =
                                this.course.chapters[i].children[
                                    j + 1
                                ].videoSourceId;
                            isFree =
                                this.course.chapters[i].children[j + 1].isFree;
                        } else {
                            if (i < this.course.chapters.length - 1) {
                                this.vid =
                                    this.course.chapters[
                                        i + 1
                                    ].children[0].videoSourceId;
                                isFree =
                                    this.course.chapters[i + 1].children[0]
                                        .isFree;
                            } else {
                                this.vid = "";
                            }
                        }
                        if (this.vid) {
                            console.log(this.vid, this.course.chapters);
                            this.getVideoPlayAuth(this.vid, isFree).then(() => {
                                this.aliplayer.replayByVidAndPlayAuth(
                                    this.vid,
                                    this.playAuth
                                );
                            });
                        } else {
                            this.$message({
                                message: "已全部播放",
                                type: "warning",
                            });
                        }
                        return;
                    }
                }
            }
        },
        createAliPlayer() {
            return new Promise((resolve) => {
                this.aliplayer = new Aliplayer(
                    {
                        id: "J_prismPlayer",
                        vid: this.vid, // 视频id
                        playauth: this.playAuth, // 播放凭证
                        autoplay: true, // 自动播放
                        encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
                        width: "100%",
                        height: "650px",
                        useH5Prism: true,
                    },
                    function (player) {
                        console.log("播放器创建成功");
                    }
                );
                resolve();
            });
        },
        /*************************************课程评论*******************************/
        saveComment() {
            //做是否登录判断
            var token = cookie.get("edu_token");
            if (!token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        window.location.href = "/login";
                    })
                    .catch(() => {});
            } else {
                this.comment.courseId = this.course.id;
                this.comment.userId = this.user.id;
                this.comment.nickname = this.user.nickname;
                this.comment.avatar = this.user.avatar;
                saveComment(this.comment).then((response) => {
                    this.pageComment();
                    this.comment.content = "";
                });
            }
        },
        handleCurrentChange(val) {
            this.current = val;
            this.pageComment();
        },
        pageComment() {
            return new Promise((resolve) => {
                pageComment(this.current, 4, this.course.id).then(
                    (response) => {
                        this.comments = response.data.comments;
                        this.total = response.data.rows;
                    }
                );
                resolve();
            });
        },
        init() {
            this.getCourseById().then(() => {
                this.getUserInfo().then(() => {
                    this.pageComment().then(() => {
                        this.isUserHasCourse();
                    });
                });
            });
        },
    },
    created() {
        this.init();
    },

    mounted() {
        this.createAliPlayer().then(() => {
            this.aliplayer.on("ended", this.getNextVideo);
        });
    },
};
</script>
<style scope>
.ddd {
    height: 650px;
    position: relative;
    display: flex;
}
.videoDiv {
    position: relative;
    width: 80%;
    left: 10px;
}
.videoListDiv {
    overflow: scroll;
    position: relative;
    width: 20%;
    right: 0px;
}
.test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(52, 168, 240, 0.951);
    background: #868585;
}
.test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(28, 88, 110, 0.937);
    border-radius: 10px;
    background: #ededed;
}
.videoSpan {
    background-color: rgb(51, 136, 220);
}
.commentDiv {
    width: 100%;
    position: relative;
    left: 10px;
}
</style>